<% render '/default.*' do %>

<div class="categories-wrapper">
  <div class="categories">
    <%= yield %>
    <a href="#"><h3>Find Robots by Category</h3></a>
    <div class="row-buttons">
      <% all_robot_categories.each do |category| %>
        <% if @item == category %>
        <a class="btn-category active" href="/robots/"><!-- click to remove category filter -->
        <% else %>
        <a class="btn-category" href="<%= category_url(category[:category]) %>">
        <% end %>
          <%= category[:icon] %>
          <span><%= category[:name] %></span>
        </a>
      <% end %>
    </div>
    <div class="row-buttons-mob">
      <div id="submenu-categories">
        <div class="menu-collapsed" id="top-item">
          <div class="text">
            Find Robots by Category
          </div>
          <i
            class="fas fa-plus show-grid"
            id="plus"
            onclick="openCloseCategories()"
          ></i>
          <i
            class="fas fa-minus hidden"
            id="minus"
            onclick="openCloseCategories()"
          ></i>
        </div>
        <div id="menu-expanded" class="menu-expanded hidden">
          <% all_robot_categories.each do |category| %>
          <% selected = @item == category %>
          <a class="submenu-category" href="<%= selected ? "/robots/" : category_url(category[:category]) %>">
            <%= category[:icon] %>
            <p class="text <%= 'selected' if selected %>">
              <%= category[:name] %>
            </p>
            <label class="checkbox-container">
              <input type="checkbox" value="0" class="checkbox" <%= 'checked="checked"' if selected %> />
              <span class="custom-checkmark"></span>
            </label>
          </a>
          <% end %>
        </div>
      </div>
    </div>
    <div class="grid-wrapper">
      <div class="col-tags">
        <a class="tag">Tag Long</a>
        <a class="tag">Tag 2</a>
        <a class="tag">Tag 3</a>
        <a class="tag">Tag 4</a>
        <a class="tag">Tag Longer</a>
        <a class="tag">Tag 5</a>
        <a class="tag">Tag Longer</a>
        <a class="tag">Tag 6</a>
        <a class="tag">Tag Long</a>
        <a class="tag">Tag 8</a>
        <a class="tag">Tag Longer</a>
        <a class="tag">Tag 9</a>
        <a class="tag">Tag 10</a>
        <a class="tag">Tag 11</a>
        <a class="tag">Tag 12</a>
        <a class="tag">Tag Longer</a>
        <a class="tag">Tag 13</a>
        <a class="tag">Tag 14</a>
        <a class="tag">Tag 15</a>
        <a class="tag">Tag Longer</a>
        <a class="tag">Tag 6</a>
        <a class="tag">Tag 7</a>
        <a class="tag">Tag 8</a>
        <a class="tag">Tag Longer</a>
        <a class="tag">Tag 9</a>
        <a class="tag">Tag 10</a>
        <a class="tag">Tag 11</a>
        <a class="tag">Tag 12</a>
        <a class="tag">Tag Longer</a>
        <a class="tag">Tag 13</a>
        <a class="tag">Tag 14</a>
        <a class="tag">Tag 15</a>
      </div>
      <div class="categories-grid" id="categories-grid">

        <% robots = @item[:category] ? all_robots_in_category(@item[:category]) : all_robots_sorted_featured_first %>
        <% robots.each do |robot| %>
        <div class="grid-item">
          <div class="card <%= 'featured' if robot[:featured] %>">
            <a href="<%= robot_url(robot) %>">
              <% if robot[:image] %>
              <img src="<%= robot_image_url(robot, :image) %>">
              <% end %>
            </a>
            <div class='card-title'>
              <a href="<%= robot_url(robot) %>"><%= robot[:title] %></a>
            </div>
            <div class='card-subtitle'>
              <%= robot[:subtitle] %>
            </div>
            <% if robot[:summary] %>
            <div class="card-description">
              <p><%= robot[:summary] %></p>
              <a href="<%= robot_url(robot) %>">Read More...</a>
            </div>
            <% end %>
            <% if !robot_features(robot).empty? %>
            <div class="card-facts">
              <% robot[:features].each do |feature| %>
              <div class='card-fact'><%= feature %></div>
              <% end %>
            </div>
            <% end %>
          </div>
        </div>
        <% end %>

      </div>
    </div>
  </div>
</div>
<% end %>

<script type="text/javascript">
  $(document).ready(function() {
    $(".checkbox-container input[type=checkbox]").click(function(e) {
      // cancel click event so that checkbox remains unchecked
      e.preventDefault();
      console.log($(e.target).closest('a'));
      $(e.target).parent().trigger('click');
    })
  });
</script>
